<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学员列表</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .warp{
            width: 100%;
            margin: auto;
            background: #DBDBDB;
        }
        #p{
            height: 150px;
            line-height: 150px;
            text-align: center;
            font-size: 28px;
            color: #000;

        }
        .war,.wa{
              width: 1000px;
              margin: auto;
          }
        .war p{
            font-size: 24px;
            color: #000;
            padding: 20px 0 0 0;
        }
        .war input{
            width: 265px;
            height: 30px;
            margin: 0 35px 40px 0;
            outline: none;
        }
        .war select{
            height: 30px;
            width: 50px;
        }
        #button{
            width: 160px;
            height: 30px;
            background: #7EE6FF;
            outline: none;
            border: none;
        }
        .wa #lb{
            font-size: 24px;
            color: #000;
        }
        .wa span{

            font-size: 20px;
            color: #000;
            width:33.33%;
            display: inline-block;
        }
        #list > li{
            list-style: none;
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid silver;
        }
    </style>
</head>
<body>
<div class="warp">
    <p id="p">学员信息表</p>
</div>
<div class="war">
    <p>添加</p>
    <input type="text" class="inp1" placeholder="姓名">

    <select class="la">
        <option value ="男">男</option>
        <option value ="女">女</option>
    </select>
    <input type="text" class="inp2" placeholder="年龄">
    <button id="button">添加</button>
</div>
<div class="wa">
    <p id="lb">列表</p>
    <p id="xbn"><span id="le">姓名</span><span>性别</span><span>年龄</span></p>
    <ul id="list"></ul>
</div>
<script>

    function loadXMLDoc()
    {
        var xmlhttp;
        if (window.XMLHttpRequest)
        {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            // IE6, IE5 浏览器执行代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                var json = JSON.parse(xmlhttp.responseText);
                console.log(json);

                document.querySelector("#list").innerHTML = '';

                for(var i = 0;i <json.data.length;i++){
                    var li = document.createElement('li');

                    var spanName = document.createElement("span");
                    spanName.innerHTML = json.data[i].studentName;
                    var spansex = document.createElement("span");
                    spansex.innerHTML = json.data[i].sex;
                    var spanage = document.createElement("span");
                    spanage.innerHTML = json.data[i].age;

                    li.appendChild(spanName);
                    li.appendChild(spansex);
                    li.appendChild(spanage);

                    document.querySelector("#list").appendChild(li);

                }
                /* document.getElementById("myDiv").innerHTML=xmlhttp.responseText;*/
            }
        };
        xmlhttp.open("GET","http://localhost/ajaxApi/public/index.php/index/student/student/index",true);
        xmlhttp.send();
    }
    loadXMLDoc()

    document.querySelector("#button").addEventListener('click',function () {
        var inp1 = document.querySelector(".inp1").value;
        console.log(inp1)
        var la = document.querySelector(".la").value;
        console.log(la)
        var inp2 = document.querySelector(".inp2").value;
        console.log(inp2)


        var xmlhttp;
        if (window.XMLHttpRequest)
        {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            // IE6, IE5 浏览器执行代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                console.log(xmlhttp.responseText);

                loadXMLDoc();

                /*document.getElementById("myDiv").innerHTML=xmlhttp.responseText;*/
            }
        };
        /*xmlhttp.open("http://localhost/ajaxApi/public/index.php/index/student/addstudent?studentName=小樱&sex=女&age=17",true);*/
        xmlhttp.open("GET","http://localhost/ajaxApi/public/index.php/index/student/addstudent?studentName="+inp1+"&sex="+la+"&age="+inp2,true);
        xmlhttp.send();
    })
</script>
</body>
</html>